<template>
  <div id="pemail" v-cloak>
    <p class="tishi">
      绑定邮箱之后，也可以用它登录到
      <span>{{ userinfo.username }}</span> 的下厨房账号
    </p>
    <div class="inp1 myinp">
      <div class="inpname">邮箱</div>
      <input type="text" v-model="email" />
    </div>
    <div class="inp2 myinp">
      <div class="inpname">密码</div>
      <input type="text" v-model="pwd" />
    </div>
    <div class="inp2 myinp warn1box">
      <div class="inpname">确认密码</div>
      <input type="text" @change="fqueren()" v-model="pwd2" />
      <p class="warn1" ref="warn1">两次密码须一致</p>
    </div>
    <div class="upbtn" @click="fup()">完成</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userinfo: {},
      email: "",
      pwd: "",
      pwd2: "",
    };
  },
  mounted() {
    this.$axios.post("/wxw/wuserinfo").then((res) => {
      this.userinfo = res.data[0];
    });
  },
  methods: {
    fup() {
      this.$axios.post("/wxw//walteruser", {
        email: this.email,
        pwd: this.pwd,
      });
    },
    // 确认密码是否一致
    fqueren() {
      console.log(555, this.pwd, this.pwd2);
      if (this.pwd != this.pwd2) {
        this.$refs.warn1.style.display = "block";
      } else {
        this.$refs.warn1.style.display = "none";
      }
    },
  },
};
</script>


<style scoped>
[v-cloak] {
  display: none;
}
#pemail {
  margin: 50px 0 0 100px;
  font-size: 16px;
}
.tishi {
  margin: 30px 10px;
}
.tishi span {
  color: #dd3915;
  font-size: 17px;
}
.myinp {
  margin-top: 20px;
  display: flex;
  text-align: right;
  padding: 8px;
}
.myinp .inpname {
  /* display: inline-block; */
  width: 93px;
  height: 29px;
  padding-right: 20px;
}
.warn1box {
  position: relative;
}
.warn1 {
  position: absolute;
  top: 50px;
  left: 100px;
  color: #dd3915;
  display: none;
}
.upbtn {
  display: inline-block;
  background-color: #dd3915;
  color: #fff;
  padding: 7.5px 30px;
  margin: 50px 30px;
  cursor: pointer;
}
</style>